<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拼音转四声音</title>
		<style type="text/css">
			body{margin: 0;}
		</style>
	</head>
	<body>
		<script src="../libs/minicomps.min.js"></script>
        <script src="../libs/Unify.js"></script>
        <script>
            const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
			const width = Stage.width;
			const height = Stage.height;
			const panel = new Panel(document.body, 0, 0, width,height);
            new Label(panel,300,10,'无声的拼音转为四个声调的拼音，例如xia->[xiā,xiá,xiǎ,xià]')
            let [x,y,w,h]=[300,30,700,250];
            const input=new TextInput(panel,x,y);
            const ouput=new TextArea(panel,x,y+30);
            input.setSize(w);
            ouput.setSize(w,h);
            new Button(panel,x+w,y,'确定',onClick);
            let checkBox=new Checkbox(panel, x+w+5, y+30, '使用逗号分隔(默认是使用回车符)', false);
            let names=['第一声','第二声','第三声','第四声'];
            let checkBoxs=[];
            for(let i=0;i<4;i++){
                checkBoxs.push(new Checkbox(panel, x+w+5, y+60+i*30, names[i], true));
            }
            function onClick(e){
                let oup='';
                let arr=input.text.split(',');
                let nums=[];
                for(let i=0;i<4;i++){
                    let cb=checkBoxs[i];
                    if(cb.checked){
                        nums.push(i+1)
                    }
                }
                console.log(nums)
                for(let i=0;i<arr.length;i++){
                     let val1=arr[i];
                     let val2=Unify.changePinyin2(val1,0,nums);
                     oup+=val2+',';
                }
                oup=oup.substr(0,oup.length-1);
                oup=oup.replaceAll(',',checkBox.checked?',':'\n')
                ouput.text=oup;
            }
            //-----------------------
            y+=h+60;
            new Label(panel,x,y,'有声调的拼音转为带数字的拼音，例如xiá->xia2')
            y+=20;
            const input2=new TextInput(panel,x,y);
            const ouput2=new TextArea(panel,x,y+30);
            input2.setSize(w);
            ouput2.setSize(w,30);
            new Button(panel,x+w,y,'确定',onClick21);
            function onClick21(e){
                let oup='';
                let arr=input2.text.split(',');
                for(let i=0;i<arr.length;i++){
                     let val1=arr[i];
                     let val2=Unify.changePinyin(val1,0);
                     oup+=val2+',';
                }
                oup=oup.substr(0,oup.length-1);
                ouput2.text=oup;
            }
            //-----------------------
            y+=80;
            new Label(panel,x,y,'有声调的拼音转为带数字的拼音，例如xia2->xiá')
            y+=20;
            const input3=new TextInput(panel,x,y);
            const ouput3=new TextArea(panel,x,y+30);
            input3.setSize(w);
            ouput3.setSize(w,30);
            new Button(panel,x+w,y,'确定',onClick22);
            function onClick22(e){
                let oup='';
                let arr=input3.text.split(',');
                for(let i=0;i<arr.length;i++){
                     let val1=arr[i];
                     let val2=Unify.changePinyin(val1,1);
                     oup+=val2+',';
                }
                oup=oup.substr(0,oup.length-1);
                ouput3.text=oup;
            }
            //-----------------------
            y+=80;
            new Label(panel,x,y,'替换功能')
            y+=20;
            const input4=new TextInput(panel,x,y);
            const ouput4=new TextArea(panel,x,y+30);
            input4.setSize(w);
            ouput4.setSize(w,30);
            const input41=new TextInput(panel,x+100,y-22,'');
            const input42=new TextInput(panel,x+200,y-22,',');
            input41.setSize(50);input42.setSize(50)
            new Button(panel,x+w,y,'确定',onClick23);
            function onClick23(e){
                ouput4.text=input4.text.split(input41.text).join(input42.text);
            }

            new TextInput(panel,x,y+100,'一些特殊字符：āáǎà,ōóǒò,ēéěè,ī í ǐ ì i,ūúǔù,ǖǘǚǜü,ɑ,ɡ').setSize(400,30)

           var sm='b,p,m,f,d,t,n,l,g,k,h,j,q,x,z,c,s,zh,ch,sh,r,y,w';
           var ym='a,ai,an,ang,ao,o,ong,ou,e,ei,en,eng,i,ia,iao,ian,iang,ie,in,ing,iong,iu,u,ua,uai,uan,uang,ui,un,uo,ü,üan,üe,ün';
           sm=sm.split(','); ym=ym.split(',');
           [x,y,sms,yms]=[10,10,[],[]];
           for(let i=0;i<sm.length;i++){
                sms.push(new Checkbox(panel, x, y+i*23, sm[i], false));
           }
           sms.push(new Checkbox(panel, x, y+sm.length*23, '', false));
           x=100
           for(let i=0;i<ym.length;i++){
                yms.push(new Checkbox(panel, x, y+i*20, ym[i], false));
           }
           new Button(panel,x+50,y,'确定',onClick3);
           new Button(panel,x+50,y+50,'重选',onClick4);
           function onClick3(e){
                let [inp,oup]=['','']
                for(let i=0;i<sms.length;i++){
                    let cb1=sms[i];
                    if(cb1.checked){
                        for(let j=0;j<yms.length;j++){
                            let cb2=yms[j];
                            if(cb2.checked){
                                let val=cb1.label+cb2.label
                                inp+=val+','
                                oup+=val+'\n'
                            }
                        }
                        inp=inp.substr(0,inp.length-1);
                        oup=oup.substr(0,oup.length-1);
                        input.text=inp;
                        ouput.text=oup;
                        break;
                    }
                }
           }
           function onClick4(){
                for(let i=0;i<sms.length;i++){
                        let cb1=sms[i];
                        cb1.checked=false;
                }
                for(let j=0;j<yms.length;j++){
                    let cb2=yms[j];
                    cb2.checked=false;
                }
           }
        </script>
    </body>
</html>